<template>
    <div>
        <div class="left-wrap" :style="{width: isCollapse ? '65px' : '280px'}">
            <div class="logo-box flex-between">
                <div class="logo flex-center" v-show="!isCollapse">
                    <img src="@/assets/logo.png" alt="">
                    <span class="txt">星录</span>
                </div>
                <img src="@/assets/img/fold.png" class="icon" @click="isCollapse = !isCollapse" :style="{marginLeft: isCollapse ? '6px' : 'inherit'}" alt="">
            </div>
            <div class="nav-box">
                <div class="chat br10 flex-center cursor-pointer" :style="{width: isCollapse ? '37px' : 'inherit'}">
                    <img class="img icon" src="../assets/img/plus.png" alt="">
                    <span class="red" v-show="!isCollapse">新对话</span>
                </div>
            </div>
            <a-menu v-show="!isCollapse" class="el-menu-vertical-demo" mode="inline" v-model:openKeys="openKeys">
                <a-sub-menu key="1">
                    <template #icon>
                        <MailOutlined />
                    </template>
                    <template #title>智能搜索</template>
                    <a-menu-item key="1-1">达人</a-menu-item>
                    <a-menu-item key="1-2">商品</a-menu-item>
                    <a-menu-item key="1-3">视频</a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="2">
                    <template #icon>
                        <MailOutlined />
                    </template>
                    <template #title>最近对话</template>
                    <a-menu-item key="2-1">电动牙刷的北美销售情况</a-menu-item>
                    <a-menu-item key="2-2">Mrbeast网红表现怎么样？</a-menu-item>
                    <a-menu-item key="2-3">上周爆单视频分析</a-menu-item>
                </a-sub-menu>
                <a-menu-item key="3">
                    <template #icon>
                        <MailOutlined />
                    </template>
                    收藏夹
                </a-menu-item>
            </a-menu>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import {
  MailOutlined,
} from '@ant-design/icons-vue';

const isCollapse = ref(false)
const openKeys = ref(['1', '2'])

</script>

<style lang="less" scoped>
.left-wrap {
    // width: 280px;
    height: 100vh;
    background: rgba(247, 248, 250, 1);
}
.logo-box {
    height: 64px;
    padding: 0 15px;
    .txt {
        font-size: 16px;
        padding-left: 8px;
    }
}
.nav-box {
    padding: 0 12px;
    margin-bottom: 10px;
    .chat {
        border: 1px solid rgba(255, 42, 120, 0.15);
        background: rgba(255, 42, 120, 0.08);
        .img {
            margin: 12px;
        }
    }
}
/deep/.ant-menu{
    background: rgba(247, 248, 250, 1) !important;
    .ant-menu-submenu {
        background: rgba(247, 248, 250, 1);
        .ant-menu-submenu-title{
            background: rgba(247, 248, 250, 1);
        }
        .ant-menu-item {
            background: rgba(247, 248, 250, 1);

        }
    }
    .ant-menu-title-content {
        line-height: 1.2;
    }
}

</style>